<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview 单选或者多选
 * @author  dxq613@gmail.com
 * @ignore
 */
var $ = require(&#39;jquery&#39;);
var SINGLE_SELECTED = &#39;single&#39;;

<span id='BUI-Component-UIBase-Selection'>/**
</span> * @class BUI.Component.UIBase.Selection
 * 选中控件中的项（子元素或者DOM），此类选择的内容有2种
 * &lt;ol&gt;
 *     &lt;li&gt;子控件&lt;/li&gt;
 *     &lt;li&gt;DOM元素&lt;/li&gt;
 * &lt;/ol&gt;
 * ** 当选择是子控件时，element 和 item 都是指 子控件；**
 * ** 当选择的是DOM元素时，element 指DOM元素，item 指DOM元素对应的记录 **
 * @abstract
 */
var selection = function() {

};

selection.ATTRS =

{
<span id='BUI-Component-UIBase-Selection-cfg-selectedEvent'>  /**
</span>   * 选中的事件
   * &lt;pre&gt;&lt;code&gt;
   * var list = new List.SimpleList({
   *   itemTpl : &#39;&amp;lt;li id=&quot;{value}&quot;&amp;gt;{text}&amp;lt;/li&amp;gt;&#39;,
   *   idField : &#39;value&#39;,
   *   selectedEvent : &#39;mouseenter&#39;,
   *   render : &#39;#t1&#39;,
   *   items : [{value : &#39;1&#39;,text : &#39;1&#39;},{value : &#39;2&#39;,text : &#39;2&#39;}]
   * });
   * &lt;/code&gt;&lt;/pre&gt;
   * @cfg {String} [selectedEvent = &#39;click&#39;]
   */
  selectedEvent: {
    value: &#39;click&#39;
  },
  events: {
    value: {
<span id='BUI-Component-UIBase-Selection-event-selectedchange'>      /**
</span>       * 选中的菜单改变时发生，
       * 多选时，选中，取消选中都触发此事件，单选时，只有选中时触发此事件
       * @name  BUI.Component.UIBase.Selection#selectedchange
       * @event
       * @param {Object} e 事件对象
       * @param {Object} e.item 当前选中的项
       * @param {HTMLElement} e.domTarget 当前选中的项的DOM结构
       * @param {Boolean} e.selected 是否选中
       */
      &#39;selectedchange&#39;: false,

<span id='BUI-Component-UIBase-Selection-event-beforeselectedchange'>      /**
</span>       * 选择改变前触发，可以通过return false，阻止selectedchange事件
       * @event
       * @param {Object} e 事件对象
       * @param {Object} e.item 当前选中的项
       * @param {Boolean} e.selected 是否选中
       */
      &#39;beforeselectedchange&#39;: false,

<span id='BUI-Component-UIBase-Selection-event-itemselected'>      /**
</span>       * 菜单选中
       * @event
       * @param {Object} e 事件对象
       * @param {Object} e.item 当前选中的项
       * @param {HTMLElement} e.domTarget 当前选中的项的DOM结构
       */
      &#39;itemselected&#39;: false,
<span id='BUI-Component-UIBase-Selection-event-itemunselected'>      /**
</span>       * 菜单取消选中
       * @event
       * @param {Object} e 事件对象
       * @param {Object} e.item 当前选中的项
       * @param {HTMLElement} e.domTarget 当前选中的项的DOM结构
       */
      &#39;itemunselected&#39;: false
    }
  },
<span id='BUI-Component-UIBase-Selection-cfg-idField'>  /**
</span>   * 数据的id字段名称，通过此字段查找对应的数据
   * &lt;pre&gt;&lt;code&gt;
   * var list = new List.SimpleList({
   *   itemTpl : &#39;&amp;lt;li id=&quot;{value}&quot;&amp;gt;{text}&amp;lt;/li&amp;gt;&#39;,
   *   idField : &#39;value&#39;,
   *   render : &#39;#t1&#39;,
   *   items : [{value : &#39;1&#39;,text : &#39;1&#39;},{value : &#39;2&#39;,text : &#39;2&#39;}]
   * });
   * &lt;/code&gt;&lt;/pre&gt;
   * @cfg {String} [idField = &#39;id&#39;]
   */
<span id='global-property-idField'>  /**
</span>   * 数据的id字段名称，通过此字段查找对应的数据
   * @type {String}
   * @ignore
   */
  idField: {
    value: &#39;id&#39;
  },
<span id='BUI-Component-UIBase-Selection-cfg-multipleSelect'>  /**
</span>   * 是否多选
   * &lt;pre&gt;&lt;code&gt;
   * var list = new List.SimpleList({
   *   itemTpl : &#39;&amp;lt;li id=&quot;{value}&quot;&amp;gt;{text}&amp;lt;/li&amp;gt;&#39;,
   *   idField : &#39;value&#39;,
   *   render : &#39;#t1&#39;,
   *   multipleSelect : true,
   *   items : [{value : &#39;1&#39;,text : &#39;1&#39;},{value : &#39;2&#39;,text : &#39;2&#39;}]
   * });
   * &lt;/code&gt;&lt;/pre&gt;
   * @cfg {Boolean} [multipleSelect=false]
   */
<span id='BUI-Component-UIBase-Selection-property-multipleSelect'>  /**
</span>   * 是否多选
   * @type {Boolean}
   * @default false
   */
  multipleSelect: {
    value: false
  }

};

selection.prototype =

{
<span id='BUI-Component-UIBase-Selection-method-clearSelection'>  /**
</span>   * 清理选中的项
   * &lt;pre&gt;&lt;code&gt;
   *  list.clearSelection();
   * &lt;/code&gt;&lt;/pre&gt;
   *
   */
  clearSelection: function() {
    var _self = this,
      selection = _self.getSelection();
    BUI.each(selection, function(item) {
      _self.clearSelected(item);
    });
  },
<span id='BUI-Component-UIBase-Selection-method-getSelection'>  /**
</span>   * 获取选中的项的值
   * @template
   * @return {Array}
   */
  getSelection: function() {

  },
<span id='BUI-Component-UIBase-Selection-method-getSelected'>  /**
</span>   * 获取选中的第一项
   * &lt;pre&gt;&lt;code&gt;
   * var item = list.getSelected(); //多选模式下第一条
   * &lt;/code&gt;&lt;/pre&gt;
   * @return {Object} 选中的第一项或者为undefined
   */
  getSelected: function() {
    return this.getSelection()[0];
  },
<span id='BUI-Component-UIBase-Selection-method-getSelectedValue'>  /**
</span>   * 根据 idField 获取到的值
   * @protected
   * @return {Object} 选中的值
   */
  getSelectedValue: function() {
    var _self = this,
      field = _self.get(&#39;idField&#39;),
      item = _self.getSelected();

    return _self.getValueByField(item, field);
  },
<span id='BUI-Component-UIBase-Selection-method-getSelectionValues'>  /**
</span>   * 获取选中的值集合
   * @protected
   * @return {Array} 选中值得集合
   */
  getSelectionValues: function() {
    var _self = this,
      field = _self.get(&#39;idField&#39;),
      items = _self.getSelection();
    return $.map(items, function(item) {
      return _self.getValueByField(item, field);
    });
  },
<span id='BUI-Component-UIBase-Selection-method-getSelectionText'>  /**
</span>   * 获取选中的文本
   * @protected
   * @return {Array} 选中的文本集合
   */
  getSelectionText: function() {
    var _self = this,
      items = _self.getSelection();
    return $.map(items, function(item) {
      return _self.getItemText(item);
    });
  },
<span id='BUI-Component-UIBase-Selection-method-clearSelected'>  /**
</span>   * 移除选中
   * &lt;pre&gt;&lt;code&gt;
   *    var item = list.getItem(&#39;id&#39;); //通过id 获取选项
   *    list.setSelected(item); //选中
   *
   *    list.clearSelected();//单选模式下清除所选，多选模式下清除选中的第一项
   *    list.clearSelected(item); //清除选项的选中状态
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {Object} [item] 清除选项的选中状态，如果未指定则清除选中的第一个选项的选中状态
   */
  clearSelected: function(item) {
    var _self = this;
    item = item || _self.getSelected();
    if (item) {
      _self.setItemSelected(item, false);
    }
  },
<span id='BUI-Component-UIBase-Selection-method-getSelectedText'>  /**
</span>   * 获取选项显示的文本
   * @protected
   */
  getSelectedText: function() {
    var _self = this,
      item = _self.getSelected();
    return _self.getItemText(item);
  },
<span id='BUI-Component-UIBase-Selection-method-setSelection'>  /**
</span>   * 设置选中的项
   * &lt;pre&gt;&lt;code&gt;
   *  var items = list.getItemsByStatus(&#39;active&#39;); //获取某种状态的选项
   *  list.setSelection(items);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {Array} items 项的集合
   */
  setSelection: function(items) {
    var _self = this;

    items = BUI.isArray(items) ? items : [items];

    BUI.each(items, function(item) {
      _self.setSelected(item);
    });
  },
<span id='BUI-Component-UIBase-Selection-method-setSelected'>  /**
</span>   * 设置选中的项
   * &lt;pre&gt;&lt;code&gt;
   *   var item = list.getItem(&#39;id&#39;);
   *   list.setSelected(item);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {Object} item 记录或者子控件
   */
  setSelected: function(item) {
    var _self = this,
      multipleSelect = _self.get(&#39;multipleSelect&#39;);

    if (!_self.isItemSelectable(item)) {
      return;
    }
    if (!multipleSelect) {
      var selectedItem = _self.getSelected();
      if (item != selectedItem) {
        //如果是单选，清除已经选中的项
        _self.clearSelected(selectedItem);
      }

    }
    _self.setItemSelected(item, true);

  },
<span id='BUI-Component-UIBase-Selection-method-isItemSelected'>  /**
</span>   * 选项是否被选中
   * @template
   * @param  {*}  item 选项
   * @return {Boolean}  是否选中
   */
  isItemSelected: function(item) {

  },
<span id='BUI-Component-UIBase-Selection-method-isItemSelectable'>  /**
</span>   * 选项是否可以选中
   * @protected
   * @param {*} item 选项
   * @return {Boolean} 选项是否可以选中
   */
  isItemSelectable: function(item) {
    return true;
  },
<span id='BUI-Component-UIBase-Selection-method-setItemSelected'>  /**
</span>   * 设置选项的选中状态
   * @param {*} item 选项
   * @param {Boolean} selected 选中或者取消选中
   * @protected
   */
  setItemSelected: function(item, selected) {
    var _self = this,
      isSelected;

    //当前状态等于要设置的状态时，不触发改变事件
    if (item) {
      isSelected = _self.isItemSelected(item);
      if (isSelected == selected) {
        return;
      }
    }
    if (_self.fire(&#39;beforeselectedchange&#39;, {
      item: item,
      selected: selected
    }) !== false) {
      _self.setItemSelectedStatus(item, selected);
    }
  },
<span id='BUI-Component-UIBase-Selection-method-setItemSelectedStatus'>  /**
</span>   * 设置选项的选中状态
   * @template
   * @param {*} item 选项
   * @param {Boolean} selected 选中或者取消选中
   * @protected
   */
  setItemSelectedStatus: function(item, selected) {

  },
<span id='BUI-Component-UIBase-Selection-method-setAllSelection'>  /**
</span>   * 设置所有选项选中
   * &lt;pre&gt;&lt;code&gt;
   *  list.setAllSelection(); //选中全部，多选状态下有效
   * &lt;/code&gt;&lt;/pre&gt;
   * @template
   */
  setAllSelection: function() {

  },
<span id='BUI-Component-UIBase-Selection-method-setSelectedByField'>  /**
</span>   * 设置项选中，通过字段和值
   * @param {String} field 字段名,默认为配置项&#39;idField&#39;,所以此字段可以不填写，仅填写值
   * @param {Object} value 值
   * @example
   * &lt;pre&gt;&lt;code&gt;
   * var list = new List.SimpleList({
   *   itemTpl : &#39;&amp;lt;li id=&quot;{id}&quot;&amp;gt;{text}&amp;lt;/li&amp;gt;&#39;,
   *   idField : &#39;id&#39;, //id 字段作为key
   *   render : &#39;#t1&#39;,
   *   items : [{id : &#39;1&#39;,text : &#39;1&#39;},{id : &#39;2&#39;,text : &#39;2&#39;}]
   * });
   *
   *   list.setSelectedByField(&#39;123&#39;); //默认按照id字段查找
   *   //或者
   *   list.setSelectedByField(&#39;id&#39;,&#39;123&#39;);
   *
   *   list.setSelectedByField(&#39;value&#39;,&#39;123&#39;);
   * &lt;/code&gt;&lt;/pre&gt;
   */
  setSelectedByField: function(field, value) {
    if (!value) {
      value = field;
      field = this.get(&#39;idField&#39;);
    }
    var _self = this,
      item = _self.findItemByField(field, value);
    _self.setSelected(item);
  },
<span id='BUI-Component-UIBase-Selection-method-setSelectionByField'>  /**
</span>   * 设置多个选中，根据字段和值
   * &lt;pre&gt;&lt;code&gt;
   * var list = new List.SimpleList({
   *   itemTpl : &#39;&amp;lt;li id=&quot;{value}&quot;&amp;gt;{text}&amp;lt;/li&amp;gt;&#39;,
   *   idField : &#39;value&#39;, //value 字段作为key
   *   render : &#39;#t1&#39;,
   *   multipleSelect : true,
   *   items : [{value : &#39;1&#39;,text : &#39;1&#39;},{value : &#39;2&#39;,text : &#39;2&#39;}]
   * });
   *   var values = [&#39;1&#39;,&#39;2&#39;,&#39;3&#39;];
   *   list.setSelectionByField(values);//
   *
   *   //等于
   *   list.setSelectionByField(&#39;value&#39;,values);
   * &lt;/code&gt;&lt;/pre&gt;
   * @param {String} field 默认为idField
   * @param {Array} values 值得集合
   */
  setSelectionByField: function(field, values) {
    if (!values) {
      values = field;
      field = this.get(&#39;idField&#39;);
    }
    var _self = this;
    BUI.each(values, function(value) {
      _self.setSelectedByField(field, value);
    });
  },
<span id='BUI-Component-UIBase-Selection-method-afterSelected'>  /**
</span>   * 选中完成后，触发事件
   * @protected
   * @param  {*} item 选项
   * @param  {Boolean} selected 是否选中
   * @param  {jQuery} element
   */
  afterSelected: function(item, selected, element) {
    var _self = this;

    if (selected) {
      _self.fire(&#39;itemselected&#39;, {
        item: item,
        domTarget: element
      });
      _self.fire(&#39;selectedchange&#39;, {
        item: item,
        domTarget: element,
        selected: selected
      });
    } else {
      _self.fire(&#39;itemunselected&#39;, {
        item: item,
        domTarget: element
      });
      if (_self.get(&#39;multipleSelect&#39;)) { //只有当多选时，取消选中才触发selectedchange
        _self.fire(&#39;selectedchange&#39;, {
          item: item,
          domTarget: element,
          selected: selected
        });
      }
    }
  }

}

module.exports = selection;
</pre>
</body>
</html>
